<template>
  <div class='packagegrant'>
    <el-form label-width='70px'>
      <el-form-item label='优惠券'>
        <div class='list'>
          <el-button type="primary" size='small' @click="dialogVisible = true">选择</el-button>
          <div class='list-item' v-for='(item, index) in list' :key='index'>
            <span class='item-yuan'>{{item.price}}元</span>
            <span class='item-type'>{{item.type | Type}}</span>
            <span class='item-willprice'>满{{item.full_price}}元使用</span>
            <span class='item-date'>{{item.to_date}}</span>
          </div>
        </div>
        
        
      </el-form-item>
      <el-form-item label-position='right' label='用户类型'>
        <div class='userType'>
          <div>
            <el-radio v-model="all" :label="0">所有用户</el-radio>
          </div>
          <div>
            <el-radio v-model="all" :label="1">按消费额</el-radio>
            <div>
              <el-input type='number' v-model="money1"></el-input>
              <span>至</span>
              <el-input type='number' v-model="money2"></el-input>
              <span>元</span>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-button type="primary" @click="shopVouchersPack">确认发放</el-button>

      <el-dialog title="选择优惠券" width="500px" :visible.sync="dialogVisible">
        <div class='dialog-list'>
          <div v-for='(item, index) in couponList' :key='index'>
            <el-checkbox v-model="item.checked">
              <div class='list-item'>
                <span class='item-yuan'>{{item.price}}元</span>
                <span class='item-type'>{{item.type | Type}}</span>
                <span class='item-willprice'>满{{item.full_price}}元使用</span>
                <span class='item-date'>{{item.to_date}}</span>
              </div>
            </el-checkbox>
          </div>
        </div>
        <div class='dialog-button'>
          <el-button type='primary' @click="yes">确定</el-button>
        </div>
      </el-dialog>
    </el-form>
  </div>
</template>

<script>
import { shopVouTypesAll, shopVouchersPack } from '@/api/marketing'
export default {
  name: 'Packagegrant',
  data() {
    return {
      dialogVisible: false,
      couponList: [],
      list: [],
      checked: false,
      consumption: false,
      all: 0,
      money1: 100,
      money2: 100
    }
  },
  filters: {
    Type (e) {
      return ({
        1: '店铺红包',
        2: '新人红包',
        4: '类目红包',
        5: '商品红包'
      })[e]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    yes () {
      this.dialogVisible = false
      
      this.list = this.couponList.filter(e => e.checked)
      console.log(this.list)
    },
    /**
     * 提交
     */
    shopVouchersPack() {
      let data = {
        key: this.$store.state.app.activeApp.saa_key,
        list: this.list.map(e => e.id),
        all: this.all == 0 ? 1 : 0
      }
      if(this.all == 1){
        data.money1 = this.money1
        data.money2 = this.money2
      }
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      shopVouchersPack(data).then(res => {
        console.log(res.data)
        this.$message({
          message: '发放成功'
        })
        loading.close()
      })
    },
    getData () {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        limit: 1000
      }
      shopVouTypesAll(params).then(res => {
        this.couponList = res.data.map(e => {
          return {...e, checked: false}
        })
      })
    },
    check(e){
      console.log(e)
    }
  },
}
</script>
<style lang="scss" scoped>
.packagegrant{
  padding-top: 20px;
}
.list{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  .list-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #bbbbbb;
    height: 35px;
    box-sizing: border-box;
    padding: 0 8px 0 12px;
    margin: 10px 15px;
    border-radius: 3px;
    .item-yuan, .item-type, .item-willprice, .item-date{
      color: red;
      font-size: 14px;
      margin-right: 4px;
    }
    .item-type{
      color: #000;
    }
    .item-willprice, .item-date{
      color: #999;
    }
  }
}
.userType{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column nowrap;
  div:last-child{
    display: flex;
    div{
      margin-left: 10px;
      width: 300px;
      span{
        margin: 0 10px;
      }
    }
  }
}
.dialog-list{
  width: 300px;
  margin-left: 100px;
  height: 300px;
  overflow: hidden;
  overflow-y: auto;
  z-index: 0;
  div{
    width: 200px;
    height: 40px;
    margin: 5px 0;
  }
}
.dialog-button{
  text-align: center;
  margin-top: 20px;
}
</style>